<!-- 关注和粉丝 -->
<!-- 小默子 2020/8/19日更新 -->
<!-- 小默子 2020/8/29更新 -->
<!-- 小默子 2020/8/31更新 -->
<template>
	<view>
		<view class="me">
			<view class="box1" @tap="toOthers">
				<image :src="summaryData.avatarUrl" mode="aspectFill"></image>
				<view class="box2">
					<view>{{summaryData.nickName}}</view>
					<view class="influence">{{summaryData.description}}</view>
				</view>
			</view>
			<!-- Followed  关注别人 select 被关注-->
			<view :class="!this.isFollow.isFollowed?'attention':'follow'" class="Fstatus" @click="Astatus">{{!this.isFollow.isFollowed ? '关注': '已关注'}}</view>
		</view>
	</view>
</template>
 
<script>
	import { _ajax } from '../in-xupt-functions.js'
	export default {
		props: {
			datas: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				attention: '',
				follow: '',
				userId: undefined,
				isFollow: {
					isFollowed: '',
					isAttention: ''
				}
			}
		},
		mounted(){
			this.userId = this.summaryData.id
			// 粉丝   默认未关注
		    this.isFollow.isFollowed = this.summaryData.followed;
		},
		methods:{
			// 点击跳转到他人页面
			toOthers() {
				uni.navigateTo({
					url: '/pages/OthersInformation/OthersInformation?userId='+this.userId
				})
			},
			// 点击关注按钮
			Astatus() {	
				// 如果未关注,点击后关注
				if(!this.isFollow.isFollowed) {
					 this.isFollow.isFollowed = !this.isFollow.isFollowed
					
					_ajax({
						// 点击后关注
						url: '/user/follow/' + this.userId,
						method: 'POST',
						data: {
							userId: this.userId,
						}
					}).then(res=>{
						this.summaryData.followed = true
					})
					
				}else {
					// 点击后取消关注
					this.isFollow.isFollowed = !this.isFollow.isFollowed
					_ajax({
						url: '/user/follow/' + this.userId,
						method: 'DELETE',
						data: {
							userId: this.userId,
						}
					}).then(res=>{
						this.summaryData.followed = false
					})
				}
			}
		},
		computed: {
			summaryData() {
				return this.$props.datas
			},
		},
		watch:{
			isFollow:{
				handler(summaryData,oldVal) {
					if(this.isFollow.isFollowed) {
						// 未关注
						// this.summaryData.followed = false
						this.follow = false
						// this.attentioin = true
					}else{
						// 关注
						this.follow = true
						// this.summaryData.followed = true
					}
				},
				immediate: true
			}
		}
	}

			
</script>

<style lang="less">
	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.me {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.box1 {
		display: flex;
		justify-content: space-between;
	}
	.box2 {
		margin-left: 30rpx;
	}
	.attention {
		width: 100rpx;
		height: 40rpx;
		background-color: #F76B8A;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
	}
	.follow{
		width: 100rpx;
		height: 40rpx;
		background-color:@uni-bg-color-hover;
		border-radius: 40rpx;
		color: @g-gray;
		font-size: 30rpx;
		text-align: center;
	}
	.influence {
		font-size: 20rpx;
		color: #7f7f7f;
	}
	.Fstatus {
		margin-top: 20rpx;
	}
</style>
